<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<!--
	<div>
		<h5>form表单获取</h5>
		<form action="/foo/ajax" method="post" enctype="multipart/form-data">
			<input type="text" name="user">
			<p>爱好</p>
			<input name="favor" type="checkbox" value="1">11;<input name="favor" type="checkbox" value="2">22;<input name="favor" type="checkbox" value="3">33;<br/>
			<input name="file" type="file">
			<input type="submit" value="提交" />
		</form>
	</div>
	<br/>
	<div>
		<h5>所上传的图片：</h5>
		<ul>
{#			{% for img in img_list %}#}
{#			<li><img style="height: 50px;width: 50px" src="/static/upload/{{ img }}"></li>#}
{#			{% end %}#}
		</ul>
	</div>
-->

	<div>
		<input id="user" type="text" name="user">
		<p>爱好</p>
		<input class="favor" name="favor" type="checkbox" value="1">11;<input class="favor" name="favor" type="checkbox" value="2">22;<input class="favor" name="favor" type="checkbox" value="3">33;<br/>
		<input id="file" name="file" type="file">
		<input id="submit" type="submit" value="提交" onclick="uploadFile();" />
	</div>
	<br/>
	<div>
		<h5>所上传的图片：</h5>
		<ul>
			{% for im in img_list %}
			<li><img style="height: 50px;width: 50px" src="/static/upload/{{ im }}"></li>
			{% end %}
		</ul>
	</div>

<hr />
	<div>
		<h5>XMLHttpRequest - Ajax请求</h5>
		<input type="button" onclick="XhrGetRequest();" value="Get发送请求" />
		<input type="button" onclick="XhrPostRequest();" value="Post发送请求" />
	</div>

    <script src="{{ static_url('js/jquery-1.11.3/jquery.min.js') }}"></script>
    <script type="text/javascript">
		//// XMLHttpRequest - Ajax请求
        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }

        function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('POST', "/foo/ajax", true);
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }

        function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('get', "/foo/ajax", true);
            // 发送请求
            xhr.send();
        }

        //// ajax上传文件
		function uploadFile() {
			var fileObj = document.getElementById('file').files[0];
			var userObj = document.getElementById('user');
			var favorObj = document.getElementsByClassName('favor');
			var v_user = userObj.value;
{#			var v_favor = new Array();#}
{#			for(var i=0;i<favorObj.length;i++){#}
{#			    if(favorObj[i].checked){#}
{#			        v_favor[i] = favorObj[i].value;#}
{#				}else {#}
{#			        v_favor[i] = 'False';#}
{#				}#}
{#			}#}
			var v_favor = [];
			for(var i=0;i<favorObj.length;i++){
			    if(favorObj[i].checked){
			    	v_favor += favorObj[i].value + ','
			    }
            }

			console.log(v_user,v_favor);
			var form = new FormData();
			form.append('user', v_user);
			form.append('favor', v_favor);
			form.append('file',fileObj);
			var xhr = new XMLHttpRequest();
			xhr.open('post','/foo/ajax',true);
			xhr.send(form);
        }
{#		$('form input').on('onclick', '#submit', function () {#}
{#			var fileObj = $('#file').file;#}
{#			#}
{#        })#}
    </script>

</body>
</html>